<!--
 * @Author: licongwei
 * @Date: 2022-03-07 17:08:49
 * @FileDescription: 导航菜单
-->
<template>
  <ul class="nav">
    <router-link
      v-for="(item, index) in routeList"
      :key="index"
      :to="item.path"
      custom
      v-slot="{ navigate, isActive }"
    >
      <li
        class="item"
        :class="isActive && 'active'"
        @click="handRouterClick(navigate, item, index)"
        :style="{ overflow: { hidden: curIndex !== index } }"
        @mouseenter="handleNavEnter(index)"
        @mouseleave="handleNavLeave"
      >
        <p class="name">
          <span>{{ item.meta.name }}</span>
        </p>
        <!-- v-show="curIndex === index" -->
        <!-- :style="{ width: item.children.length * 130 + 'px' }" -->
        <ul
          v-if="item.children"
          v-show="
            isShowChild == index ? true : curIndex == index ? true : false
          "
          class="its"
        >
          <router-link
            v-for="(it, ind) in item.children"
            :key="ind"
            :to="it.path"
            custom
            v-slot="{ navigate, isActive }"
          >
            <li
              class="it"
              :class="isActive && 'sub-active'"
              @click.stop="handRouterClick(navigate, it, index)"
            >
              {{ it.meta.name }}
            </li>
          </router-link>
        </ul>
      </li>
    </router-link>
  </ul>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
export default defineComponent({
  name: 'NavHeader',
  components: {},
  setup() {
    const router = useRouter()
    const route: any = useRoute()
    const routeList: any = router.options.routes[3].children
    let subIndexList: any = []
    let subIndexAllList: any = []
    const isShowChild = ref(-1)
    const curIndex = ref(-1)
    let saveCurIndex = -1
    const handleNavEnter = (index: number) => {
      // 悬停前没有二级  显示二级
      // 悬停前有二级  先隐藏之前的二级，显示现在的二级，移开后显示之前的二级
      if (subIndexList.includes(index)) {
        if (subIndexList.includes(curIndex.value)) {
          // 有二级
          isShowChild.value = index
          saveCurIndex = curIndex.value
          curIndex.value = -1
        } else {
          // 没二级
          isShowChild.value = index
        }
      }
    }
    const handleNavLeave = () => {
      if (isShowChild.value != -1) {
        isShowChild.value = -1
      }
      if (saveCurIndex != -1) {
        curIndex.value = saveCurIndex
        saveCurIndex = -1
      }
    }
    const handRouterClick = (val: any, item: any, index: number) => {
      curIndex.value = index
      saveCurIndex = -1
      if (notProd.includes(item.name)) {
        ElMessage({
          message: '系统正在建设中，敬请期待。。。',
          showClose: true,
          offset: 130,
          duration: 92000,
          customClass: 'customClass',
          type: 'warning'
        })
        return false
      }
      val()
    }

    const menuInit = () => {
      const menuPath = route.path.slice(0, 3)
      // 菜单初始化
      subIndexList = routeList
        ?.map((item: any, index: number) => {
          item.children && item.children.length > 0 ? index : undefined
          if (item.path == menuPath) {
            curIndex.value = index
          }
          subIndexAllList.push(item.path)
          return item.children && item.children.length > 0 ? index : undefined
        })
        .filter((i: any) => i !== undefined)
    }
    menuInit()

    watch(
      () => router.currentRoute.value.path,
      (value: any) => {
        const rou = value.slice(0, 3)
        const index = subIndexAllList.indexOf(rou)
        if (index != -1) {
          curIndex.value = index
        }
      }
    )

    return {
      subIndexList,
      isShowChild,
      routeList,
      curIndex,
      handleNavEnter,
      handleNavLeave,
      handRouterClick
    }
  }
})
</script>
<style lang="less" scoped>
ul.nav {
  position: absolute;
  top: 12px;
  left: 30px;
  width: max-content;
  display: flex;
  // justify-content: flex-end;
  justify-content: flex-start;
  position: relative;
  > li.item {
    white-space: nowrap;
    cursor: pointer;
    padding: 1px 10px 5px 10px;
    z-index: 10;
    overflow: none;
    z-index: 10;
    > p.name {
      line-height: 35px;
      text-align: center;
      color: rgba(255, 255, 255, 0.9);
      span {
        font-size: 22px;
        font-family: 'AliHYAiHei';
      }
    }
    &.active {
      p.name {
        color: #ffea00;
        // &::after {
        //   background: url('../img/nav-active-bg.png') no-repeat;
        //   background-size: 100% 100%;
        //   width: 110%;
        // }
      }
    }
    ul.its {
      height: 65px;
      width: 470px;
      position: absolute;
      top: 30px;
      left: 42px;
      background-color: #fff;
      background: url('../img/subMenu-bg.png') no-repeat;
      background-size: 100% 81%;
      background-position-y: bottom;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      padding: 0px 45px;
      li.it {
        white-space: nowrap;
        position: relative;
        top: 10px;
        margin: 0px 15px;
        font-size: 20px;
        font-family: 'AliHYAiHei';
        text-align: center;
        color: rgba(255, 255, 255, 0.9);
        height: 100%;
        display: flex;
        align-items: center;
        &.sub-active {
          color: #ffea00;
          position: relative;
          &::after {
            position: absolute;
            top: 36px;
            left: 50%;
            transform: translateX(-50%);
            content: url('../img/subMenu-item.png');
          }
        }
      }
    }
  }
}
</style>
